<template>
  <div class="loginContainer">
    <div class="registerNav">
      <div class="header">
        <div class="header_img">
          <img src="./image/logo.png" alt="" />
        </div>
        <div style="color: #fff; fontsize: 16px">
          单身中还没账号？<router-link to="/">立即注册</router-link>
        </div>
        <!-- <button class="header_btn" @click="toLogin">登录</button> -->
      </div>
    </div>
    <div class="backgroundImg">
      <img class="bigImg" src="./image/banner1.jpg" alt="" />
      <el-form>
        <el-form-item label="登录珍爱网" label-width="260px"></el-form-item>
        <el-form-item>
          <el-row>
            <el-col :span="20" :offset="2">
              <el-input
                v-model="loginData.phone"
                placeholder="请输入电话号码"
                style="height: 50px"
              ></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item>
          <el-row>
            <el-col :span="20" :offset="2">
              <el-input
                v-model="loginData.password"
                placeholder="请输入密码"
                style="height: 50px"
                show-password
              ></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label-width="30px">
          <el-button
            type="primary"
            style="
              width: 370px;
              height: 40px;
              background: linear-gradient(-135deg, #856df1, #a468ef);
            "
            @click="toIndex"
            >立即登录</el-button
          >
        </el-form-item>
        <el-form-item label-width="30px">
          <el-row>
            <el-col :span="12" :offset="8">
              <router-link to="/">立即注册</router-link>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </div>
    <Footer v-if="!$route.meta.isHideFooter" />
  </div>
</template>

<script>
import {reqtoIndex} from '@/api/index'
export default {
  name: "Register",
  data() {
    return {
      loginData:{
        phone:'',
        password:''
      }
    };
  },
  mounted() {
    if(window.localStorage.getItem('cookie')){
       window.localStorage.removeItem('cookie')
     }
  },
  methods: {
    handleScroll(e) {
      if (e.target.scrollingElement.scrollTop > 50) {
        this.flag = true;
      } else {
        this.flag = false;
      }
      /* console.log(e.target.scrollingElement.scrollTop,e) */
    },
    handleChange() {},
    toLogin() {
      this.$router.push({
        path: "/login",
      });
    },
    async toIndex(){
      const {phone,password} = this.loginData
    const res = await reqtoIndex({phone,password})
    if(res.data.info === '登录成功'){
      window.localStorage.setItem("cookie",JSON.stringify(res.data.data))
      this.$router.replace('/index')
    }else if(res.data.info === '没有该用户'){
       this.$message.error('没有该用户')
    }
    }
  },
};
</script>

<style lang="stylus" scoped>
.loginContainer
  width 100%
  .registerNav
    width 100%
    background linear-gradient(-134.2deg, #8070f1, #b06cef)
    overflow hidden
    .header
      box-sizing border-box
      width 100%
      height 80px
      display flex
      align-items center
      padding 0 180px
      justify-content space-between
      &.active
        background #996EF0
      .header_img
        width 130px
        height 68px
      .header_btn
        width 80px
        height 36px
        color #fff
        font-size 14px
        padding 0 20px
        outline none
        border 1px solid rgb(255, 255, 255)
        height 36px
        line-height 34px
        background transparent
        filter none !important
.backgroundImg
  position relative
  width 100%
  overflow hidden
  .bigImg
    width 100%
    min-width 1680px
  .brand
    padding-top 40px
    .brandItem
      display flex
      flex-direction column
      align-items center
      h4
        font-size 20px
        padding 0 0 8px
      p
        font-size 14px
        color #999
        width 200px
        height 40px
  .bigImg1
    padding-top 50px
    width 100%
    img
      width 100%
  .el-form
    position absolute
    top 100px
    right 200px
    width 400px
    height 436px
    background #fff
    padding 0 30px
    opacity 0.7
    color #333
    border 1px dotted #fff
    box-shadow 0px 2px 11px 0px rgb(0 0 0 / 50%)
  .el-form-item__label
    font-size 18px !important
  .el-cascader
    margin 0 10px
</style>
